(function()
{
    var imgFiles;
    var srcLeft=0;
    var srcTop=0;

    function setCanvasSize()
    {
	var imgCanvas = document.getElementById("myCanvas");
        imgCanvas.width = canvasContainer.offsetWidth;
        imgCanvas.height = canvasContainer.offsetHeight;
    }

    function drawInitialCanvas(canvas)
    {
	var ctx = canvas.getContext("2d");

	ctx.fillStle = 'rgb(191,255,255)';
	ctx.fill();
	ctx.fillText("Drop images here", 10, 50);
    }

    function drawCanvas(canvas)
    {
	if(imgFiles && imgFiles.length)
	{
	}
	else
	{
	    drawInitialCanvas(canvas);
	}
    }
    
    function dragOverHandler(evt)
    {
	evt.stopPropagation();
	evt.preventDefault();

	evt.dataTransfer.dropEffect = 'link';
    }

    function dropHandler(evt)
    {
	evt.stopPropagation();
	evt.preventDefault();

	preview(document.getElementById("myCanvas"), evt.dataTransfer.files);

	return;
    }

    function initDropTarget(dropTarget)
    {
	dropTarget.addEventListener("dragover", dragOverHandler, false);
	dropTarget.addEventListener("drop", dropHandler, false);
    }

    function preview(canvas, files)
    {
	var ctx = canvas.getContext("2d");

	var file = files[0];

	if (file.type.match(/^image\/(png|jpeg|gif)$/))
	{
	    var image = new Image();
	    var reader = new FileReader();

	    reader.onload = function(evt)
	    {

		image.onload = function()
		{
		    ctx.drawImage(image, 0, 0);
		}

		image.src = evt.target.result;
	    }

	    reader.readAsDataURL(file);
	}
    }



    window.addEventListener( 'load', function()
			     {
				 queue = null,
				 wait = 300;
    
				 setCanvasSize();
    
				 var imgCanvas = document.getElementById("myCanvas");
				 initDropTarget(imgCanvas);
				 drawCanvas(imgCanvas);

//				 window.addEventListener( 'resize', function() {
//				     clearTimeout( queue );
//				     queue = setTimeout(function() {
//					 setCanvasSize();
//				     }, wait );
//				 }, false );
			     }, false );


    

})();
